<template>
    <div id="login" :style="{background:backgroundImage}">

        <!-- 登录部分 -->
        <div id="account" v-loading="loginLoading">
            <h1 class="title">医院药品管理系统</h1>
            <div>
                <el-form class="form" @submit.native.prevent label-width="80px" ref="ruleForm" :model="form" :rules="rules">
                    <el-form-item label="手机号" prop="phone">
                        <el-input autocomplete="on" @keyup.enter.native="submitForm('ruleForm')" placeholder="手机号"
                                prefix-icon="el-icon-user" v-model="form.phone">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input autocomplete="on" @keyup.enter.native="submitForm('ruleForm')" placeholder="密码"
                                prefix-icon="el-icon-warning-outline" v-model="form.password" show-password>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        <el-button native-type="reset" @click="resetForm('ruleForm')">重置</el-button>
                        <!-- <el-button type="text" style="margin-left: 40px"
                                @click="refreshVerifyCode4ChangePassword();dialogVisible = true">修改密码
                        </el-button> -->
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!--修改密码框-->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" v-loading="loading"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false">

            <el-form ref="form4ChangePassword" :model="form4ChangePassword" :rules="rules4ChangePassword"
                     label-width="120px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form4ChangePassword.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="邮箱验证码" prop="smsVerifyCode">
                    <el-row>
                        <el-col :span="16">
                            <el-input v-model="form4ChangePassword.smsVerifyCode" placeholder="请输入邮箱验证码"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="primary" @click="sendMailboxVerifyCode4ChangePassword"
                                       :disabled="sendMailboxVerifyCode4ChangePasswordBtn">
                                {{sendMailboxVerifyCode4ChangePasswordTxt}}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="form4ChangePassword.newPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="confirmNewPassword">
                    <el-input type="password" v-model="form4ChangePassword.confirmNewPassword"
                              placeholder="请再次输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="changePassword">确 定</el-button>
			</span>
        </el-dialog>

    </div>
</template>

<script>


    export default {
        data() {
            /* 自定义验证 */
            var validateAccount = (rule, value, callback) => {
                var regAccount = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
                if (value === '') {
                    callback(new Error('手机号不能为空!'))
                } else if (regAccount.test(value) == false) {
                    callback(new Error('请输入手机号!'))
                } else {
                    callback()
                }
            };
            var validatePassword = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('密码不能为空!'))
                } else {
                    callback()
                }
            };
            // 密码校验
            const validatePass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else {
                    callback();
                }
            };
            const validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.form4ChangePassword.newPassword) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
                backgroundImage: "url(" + require("@/assets/images/background.jpeg") + ")",
                loading: false,
                empId: undefined,
                kaptcha:   "/host/captcha/getVerifyCode?t=" + new Date().getTime(),
                //修改密码
                form4ChangePassword: {},
                dialogVisible: false,
                loginLoading: false,
                form: {
                    phone: '18227969106',
                    password: '123'
                },
                sendMailboxVerifyCode4ChangePasswordTxt: "发送",
                sendMailboxVerifyCode4ChangePasswordBtn: false,
                rules: {
                    phone: [{
                        validator: validateAccount,
                        trigger: 'blur'
                    }],
                    password: [{
                        validator: validatePassword,
                        trigger: 'blur'
                    }]
                },
                rules4ChangePassword: {
                    username: [{required: true, message: '用户名不能为空', trigger: 'change'}],
                    smsVerifyCode: [{required: true, message: '验证码部门为空', trigger: 'change'}],
                    newPassword: [
                        {
                            required: true,
                            validator: validatePass,
                            trigger: "blur"
                        }
                    ],
                    confirmNewPassword: [
                        {
                            required: true,
                            message: "",
                            validator: validatePass2,
                            trigger: "blur"
                        }
                    ]
                },
                isClick: false,
                countdown: 30, //倒计时时间
            }
        },
        methods: {
            //刷新验证码
            refreshVerifyCode() {
                this.kaptcha = "/host/captcha/getVerifyCode?t=" + new Date().getTime();
                this.form.verifyCode = "";
            },
            //倒计时函数
            timeCount() {
                if (this.countdown == 0) {
                    this.countdown = 10;
                    this.isClick = false;
                    this.sendMailboxVerifyCode4ChangePasswordBtn = false;
                    this.sendMailboxVerifyCode4ChangePasswordTxt = "发送";
                    return
                }
                this.countdown--;
                this.sendMailboxVerifyCode4ChangePasswordTxt = this.countdown + "s后发送";
                setTimeout(this.timeCount, 1000);
            },

            //发送验证码
            sendMailboxVerifyCode4ChangePassword() {
                let self_ = this;
                this.isClick = true;
                this.sendMailboxVerifyCode4ChangePasswordBtn = true;
                this.timeCount();

                if (this.form4ChangePassword.username == null || this.form4ChangePassword.username == "") {
                    this.$message.error("用户名不能为空");
                    this.loading = false;
                    return
                }
                //校验邮箱
                var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/; //正则表达式
                if (!reg.test(this.form4ChangePassword.username)) { //正则验证不通过，格式不对
                    this.$message.error("用户名格式错误");
                    return;
                }
                this.loading = true;
                this.$post("/getMailboxCode4", this.form4ChangePassword).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '发送成功',
                            type: 'success'
                        });
                        self_.sendSmsVerifyCode4ChangePasswordBtn = true;
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                });
            },
            //修改密码
            changePassword() {
                this.loading = true;
                let self_ = this;

                if (!this.form4ChangePassword.username) {
                    this.$message.error("用户名不能为空");
                    this.loading = false;
                    return
                }

                if (!this.form4ChangePassword.smsVerifyCode) {
                    this.$message.error("邮箱验证码不能为空");
                    this.loading = false;
                    return
                }

                if (!this.form4ChangePassword.newPassword) {
                    this.$message.error("新密码不能为空");
                    this.loading = false;
                    return
                }

                if (!this.form4ChangePassword.confirmNewPassword) {
                    this.$message.error("确认密码不能为空");
                    this.loading = false;
                    return
                }

                if (this.form4ChangePassword.newPassword != this.form4ChangePassword.confirmNewPassword) {
                    this.$message.error("新密码和验证密码不一致");
                    this.loading = false;
                    return
                }

                //校验QQ验证码
                this.$post("/checkMailboxCode4", {smsVerifyCode: this.form4ChangePassword.smsVerifyCode}).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        var json = {};
                        json.username = this.form4ChangePassword.username;
                        json.password = this.form4ChangePassword.newPassword;
                        //修改密码
                        this.$post("/employee/changePassword", json).then(res => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                this.dialogVisible = false;
                            } else {
                                this.$message.success(res.data.message);
                            }
                        })

                    } else {
                        this.$message.error("验证码错误");
                    }
                    this.loading = false;
                });
            },
            refreshVerifyCode4ChangePassword() {

            },
            //登录
            submitForm(formName) {
                var that = this;
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        this.$post("/user/login", this.form).then(res => {
                            //console.log("res", res);
                            if (res.code == 200) {
                                //保存token在sessionStorage里面
                                window.sessionStorage.setItem("token", res.token);

                                //保存userId到localStorage里面
                                window.localStorage.setItem("userId", res.user.id);
                                window.localStorage.setItem("user", JSON.stringify(res.user));
                                this.$message.success("登录成功");
                                setTimeout(function () {
                                    //进入首页
                                    that.$router.push("/home");
                                }, 500);
                            } else {
                              this.$message.error(res.msg);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
            updateDrugStatus(){
                this.$get("/drug/updateDrugStatus").then(res=>{
                    if(res.code == 200 ){
                        console.log('更新药品状态成功');
                    }else{
                        this.$notify({
                        title: '药品',
                        message: '更新药品状态更新失败'
                        });
                    }
                })
            }
        },
        mounted() {
        },
        created(){
            this.updateDrugStatus();
        }
    }
</script>

<style lang="less">


    .form {
        padding-top: 20px;
        /deep/ .el-form-item {
            margin-bottom: 30px;
        }

    }


    #login {
        width: 100%;
        height: 100%;
        background-repeat:no-repeat;
        position:absolute;
        /*background: #10c55c;*/

        #font {
            position: relative;
            width: 500px;
            left: 160px;
            top: 170px;
            font-size: 5rem;
            color: white;

            .yellow {
                color: yellow;
            }
        }


        #downImg {
            position: absolute;
            bottom: 0px;
            left: 150px;
        }

        #account {
            position: absolute;
            display: inline-block;
            width: 380px;
            height: 440px;
            top: 75px;
            right: 10%;
            background-color: rgba(0,72,129,0.8);
            border-radius: 10px;
            box-shadow: 10px 10px 25px -2px rgb(0 0 0 / 80%);
            padding: 10px;

            .title {
                color: #777;
                font-size: 35px;
                text-align: center;
                margin-top: 15px;
                margin-bottom: 40px;
            }

            .lookout {
                color: #777;
                padding: 20px;
            }

            .el-input {
                width: 85%;
            }

        }
    }
</style>
